<template>
	<el-card class="box-card">
		<div slot="header" class="clearfix">
			<span style="color: rgb(64,158,255);">企业基本信息</span>
			<el-button style="float: right; margin-right: 60px;" type="text" icon="el-icon-circle-plus-outline"
				@click='handleAdd'>添加
			</el-button>
			<!-- 添加企业信息的弹窗 -->
			<el-dialog title="企业基本信息" :visible.sync="dialogAddFormVisible" width="60%"
				@close="handleDialogClose('addForm')">
				<el-form :model="addForm" :rules="rules" ref="addForm">
					<div class="clearfix">
						<el-form-item label="企业编号" :label-width="formLabelWidth" style="width: 400px; float: left;">
							<el-input autocomplete="off" style="width: 320px;" readonly placeholder="系统自动生成"></el-input>
						</el-form-item>
						<el-form-item label="企业名称" :label-width="formLabelWidth"
							style="width: 400px; float: right; margin-right: 50px;" prop="companyName">
							<el-input v-model.trim="addForm.companyName" autocomplete="off" style="width: 320px;"></el-input>
						</el-form-item>
					</div>
					<div class="clearfix">
						<el-form-item label="证件类型" prop="documentType" required style="width: 400px; float: left;"
							:label-width="formLabelWidth">
							<el-select v-model="addForm.documentType" placeholder="请选择">
								<el-option v-for="item in businessTypes" :key="item.documentTypeId"
									:label="item.documentTypeName" :value="item.documentTypeId">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="证件号码" :label-width="formLabelWidth"
							style="width: 400px; float: right; margin-right: 50px;" prop="documentNumber">
							<el-input v-model.trim="addForm.documentNumber" style="width: 320px;"></el-input>
						</el-form-item>
					</div>
					<div class="clearfix">
						<el-form-item label="企业成立日期" :label-width="formLabelWidth" style="float: left; margin: 0;"
							required prop="companyCreateTime">
							<el-form-item>
								<!-- value-format="yyyy-MM-dd"转换日期格式 -->
								<el-date-picker type="date" placeholder="选择日期" v-model="addForm.companyCreateTime"
									style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
							</el-form-item>
						</el-form-item>
						<el-form-item label="注册资本(万元)" :label-width="formLabelWidth"
							style="width: 400px; float: right; margin-right: 50px;" prop="registeredCapital">
							<el-input v-model.trim="addForm.registeredCapital" autocomplete="off" style="width: 320px;">
							</el-input>
						</el-form-item>
					</div>
					<div class="clearfix">
						<el-form-item label="详细地址" :label-width="formLabelWidth" style="width: 400px; float: left;"
							prop="address">
							<el-input v-model.trim="addForm.address" style="width: 320px;"></el-input>
						</el-form-item>
						<el-form-item label="职工人数" :label-width="formLabelWidth"
							style="width: 400px; float: right; margin-right: 50px;" prop="employeesNumber">
							<el-input v-model.trim="addForm.employeesNumber" style="width: 320px;"></el-input>
						</el-form-item>
					</div>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button type="primary" @click="resetForm('addForm')">重置</el-button>
					<el-button type="primary" @click='handleAddForm'>添加</el-button>
				</div>
			</el-dialog>
		</div>
		<!-- 企业基本信息的表格 -->
		<el-table
			:data="tableData.filter(data => !search || data.companyId.toLowerCase().includes(search.toLowerCase()))"
			style="width: 100%" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column label="企业编号" prop="companyId" width="120px">
				<!-- 添加链接用template并且el-link -->
				<template slot-scope="scope">
					<el-link :href='`#/businessdetail/${scope.row.companyId}`' style='color: rgb(64,158,255);'>
						{{scope.row.companyId}}</el-link>
				</template>
			</el-table-column>
			<el-table-column label="企业名称" prop="companyName">
			</el-table-column>
			<el-table-column label="证件类型" prop="documentName">
			</el-table-column>
			<el-table-column label="证件号码" prop="documentNumber">
			</el-table-column>
			<el-table-column label="企业成立日期" prop="companyCreateTime">
			</el-table-column>
			<el-table-column label="注册资本(万元)" prop="registeredCapital">
			</el-table-column>
			<el-table-column label="详细地址" prop="address">
			</el-table-column>
			<el-table-column label="职工人数" prop="employeesNumber">
			</el-table-column>
			<el-table-column label="登记日期" prop="registeredTime">
			</el-table-column>
			<el-table-column label="更新日期" prop="updateTime">
			</el-table-column>
			<el-table-column width="250px" align="center">
				<template slot="header" slot-scope="scope">
					<el-input placeholder="请输入企业编号" v-model="search" clearable class="input-box"> <i slot="prefix"
							class="el-input__icon el-icon-search"></i></el-input>
				</template>
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEditForm(scope.row.companyId)" type="primary" plain
						icon="el-icon-edit">修改
					</el-button>
					<el-link :href='`#/executive/${scope.row.companyId}`'>
						<el-button type="primary" icon="el-icon-user" plain style="margin-left: 10px;">高管维护</el-button>
					</el-link>
				</template>
			</el-table-column>
		</el-table>
		<!-- 修改企业信息的弹框 -->
		<el-dialog title="企业基本信息" :visible.sync="dialogEditFormVisible" width="60%"
			@close="handleDialogClose('editForm')">
			<el-form :model="editForm" :rules="rules" ref="editForm">
				<div class="clearfix">
					<el-form-item label="企业编号" :label-width="formLabelWidth" style="width: 400px; float: left;" required
						prop="companyId">
						<el-input autocomplete="off" style="width: 320px;" readonly v-model="editForm.companyId">
						</el-input>
					</el-form-item>
					<el-form-item label="企业名称" :label-width="formLabelWidth"
						style="width: 400px; float: right; margin-right: 50px;" prop="companyName">
						<el-input v-model.trim="editForm.companyName" autocomplete="off" style="width: 320px;"></el-input>
					</el-form-item>
				</div>
				<div class="clearfix">
					<el-form-item label="证件类型" prop="documentType" required style="width: 400px; float: left;"
						:label-width="formLabelWidth">
						<el-select v-model="editForm.documentType" placeholder="请选择">
							<el-option v-for="item in businessTypes" :key="item.documentTypeId"
								:label="item.documentTypeName" :value="item.documentTypeId">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="证件号码" :label-width="formLabelWidth"
						style="width: 400px; float: right; margin-right: 50px;" prop="documentNumber">
						<el-input v-model.trim="editForm.documentNumber" autocomplete="off" style="width: 320px;"></el-input>
					</el-form-item>
				</div>
				<div class="clearfix">
					<el-form-item label="企业成立日期" :label-width="formLabelWidth" style="float: left; margin: 0;">
						<el-form-item prop="companyCreateTime">
							<el-date-picker type="date" placeholder="选择日期" v-model="editForm.companyCreateTime"
								style="width: 100%;" value-format="yyyy-MM-dd">
							</el-date-picker>
						</el-form-item>
					</el-form-item>
					<el-form-item label="注册资本(万元)" :label-width="formLabelWidth"
						style="width: 400px; float: right; margin-right: 50px;" prop="registeredCapital">
						<el-input v-model.trim="editForm.registeredCapital" autocomplete="off" style="width: 320px;">
						</el-input>
					</el-form-item>
				</div>
				<div class="clearfix">
					<el-form-item label="详细地址" :label-width="formLabelWidth" style="width: 400px; float: left;"
						prop="address">
						<el-input v-model.trim="editForm.address" autocomplete="off" style="width: 320px;"></el-input>
					</el-form-item>
					<el-form-item label="职工人数" :label-width="formLabelWidth"
						style="width: 400px; float: right; margin-right: 50px;" prop="employeesNumber">
						<el-input v-model.trim="editForm.employeesNumber" autocomplete="off" style="width: 320px;">
						</el-input>
					</el-form-item>
				</div>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="resetForm('editForm')">重置</el-button>
				<el-button type="primary" @click='handleSaveEdit'>保存</el-button>
			</div>
		</el-dialog>
		<div style="margin: 20px 0 20px 10px" class="clearfix">
			<el-button style="float: left;" type="primary" plain icon="el-icon-delete" @click='handleDelete'>删除所选记录
			</el-button>
		</div>
	</el-card>
</template>

<script>
	import { Business } from '@/api/';
	export default {
		data() {
			return {
				tableData: [],
				search: '',
				dialogAddFormVisible: false,
				dialogEditFormVisible: false,
				addForm: {
					companyName: '',
					documentType: '',
					documentNumber: '',
					companyCreateTime: '',
					registeredCapital: '',
					address: '',
					employeesNumber: ''
				},
				editForm: {},
				businessTypes: {},
				selectionList: [],
				// 表单验证规则;
				rules: {
					companyName: [{
							required: true,
							message: '请输入企业名称!',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 80,
							message: '请输入6-80个字符',
							trigger: 'blur'
						},
					],
					documentNumber: [{
							required: true,
							message: '请输入证件号码!',
							trigger: 'blur'
						},
						{
							pattern: /^\d{18}$/,
							message: '证件号码格式不正确!',
							trigger: 'blur'
						},
					],
					registeredCapital: [{
							required: true,
							message: '请输入注册资本!',
							trigger: 'blur'
						},
						{
							pattern: /^\d+(\.\d{1,2})?$/,
							message: '只保留两位小数!',
							trigger: 'blur'
						},
					],
					address: [{
							required: true,
							message: '请输入详细地址!',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 80,
							message: '请输入6-80个字符',
							trigger: 'blur'
						},
					],
					employeesNumber: [{
							required: true,
							message: '请输入职工人数!',
							trigger: 'blur'
						},
						{
							pattern: /^[0-9]*$/,
							message: '请输入数字!',
							trigger: 'blur'
						},
					],
				},
				// 标签长度;
				formLabelWidth: '120px'
			}
		},
		created() {
			// 加载企业类型
			this.loadBusinessTypes();
			// 加载企业信息列表
			this.loadList();
		},
		methods: {
			// 获取企业类型
			async loadBusinessTypes() {
				let {
					status,
					data
				} = await Business.types();
				if (status) {
					this.businessTypes = data;
				}
			},
			// 获取企业信息列表
			async loadList() {
				// 没有参数就不用传参;
				let {
					status,
					data
				} = await Business.businessMsg();
				if (status) {
					this.tableData = data;
				}
			},
			// 点击修改获取数据;
			async handleEditForm(id) {
				this.dialogEditFormVisible = true;
				let { status, data } = await Business.show({ id });
				if (status) {
					this.editForm = data;
				}

			},
			// 点击删除,删除选中的记录;
			handleDelete() {
				this.$confirm('此操作将永久删除用户,是否继续?', {
						type: 'warning'
					})
					.then(() => {
						this.selectionList.forEach(async (id) => {
							let { status, msg } = await Business.remove({ id });
							this.loadList();
						});
						this.$message.success('删除成功！');
					})
					.catch(() => {
						this.$message.info('取消成功');
					});
			},
			// 复选框,记录选中个数以及控制选中状态;
			handleSelectionChange(val) {
				this.multipleSelection = val;
				this.selectionList = [],
					// 记录所有选中的企业的编号，放在selectionList数组中
					val.forEach(element => {
						this.selectionList.push(element.companyId);
					});
			},
			handleAdd() {
				this.dialogAddFormVisible = true;
			},
			// Dialog 关闭的回调,重置表单;
			handleDialogClose(form) {
				this.$refs[form].resetFields();
			},
			// 点击添加,提交添加的表单数据;
			handleAddForm() {
				this.$refs.addForm.validate(async (valid) => {
					if (valid) {
						let { status, data } = await Business.check({ ...this.addForm });
						if (status) {
							if (!data) {
								let { status, data } = await Business.add({ ...this.addForm });
								if (status) {
									this.$message.success('添加成功!');
									this.tableData.push({ ...data });
									this.dialogAddFormVisible = false;
									// 页面跳转到企业详细信息界面;
									this.$router.push(`/businessdetail/${data.companyId}`);
								}
							} else {
								this.$message.info('证件号码和证件类型以及企业名称不能重复!');
							}
						}
					}
				})
			},
			// 修改后,点击保存按钮执行的函数;
			handleSaveEdit() {
				this.$refs.editForm.validate(async (valid) => {
					if (valid) {
						let { status, data } = await Business.edit({ ...this.editForm });
						if (status) {
							this.$message.success('修改成功!');
							// 修改DOM;
							this.loadList();
							this.dialogEditFormVisible = false;
						}
					}
				})
			},
			// 重置表单
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
		}
	}
</script>

<style lang="less">
	.box-card {
		width: 90%;
		margin: 0 auto;
		padding-bottom: 20px;

		.clearfix::after {
			content: '';
			display: block;
			clear: both;
		}
	}
</style>
